<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/excutive_housekeeper/service.css" />
		<script src="../../js/statistics.js"></script>
		<style>
			.header a{
				color:#fff;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"></h1>
		</header>
		<div class='search clear'>
			<div class="mui-input-row mui-search">
    			<input type="search" class="mui-input-clear input_click" placeholder="请输入办事事项">	
			</div>
			<span class='s_click ' style='display:none;'>取消</span>
		</div>
    	<!--搜索弹出框-->
		<div class='modal_search' style='display:none;'>
			<!--列表：你的搜索信息-->
			<!--<ul class='mui-table-view' class="search-list">
			</ul>	-->
			
		</div>
		<div id="main"></div>
		<!--<ul class="mui-table-view clear ul_item"> 
       		<li class="mui-table-view-cell mui-collapse">
           		<a class="mui-navigate-right" href="#">面板1</a>
           		<div class="mui-collapse-content div_item">
               		<ul class='mui-table-view'>
               			<li class='mui-table-view-cell'>你</li>
               			<li class='mui-table-view-cell'>好</li>
               			<li class='mui-table-view-cell'>吗</li>
               		</ul>
           		</div>
       		</li>
       		<li class="mui-table-view-cell mui-collapse">
           		<a class="mui-navigate-right" href="#">面板2</a>
           		<div class="mui-collapse-content div_item">
               		<ul class='mui-table-view'>
               			<li class='mui-table-view-cell'>你</li>
               			<li class='mui-table-view-cell'>好</li>
               			<li class='mui-table-view-cell'>吗</li>
               		</ul>
           		</div>
       		</li>
       		<li class="mui-table-view-cell">
           		<p class='item_title'>
           			用人单位吸纳下岗失业人员社会保险补贴
           			<i></i>
           		</p>
           		<div class="mui-collapse-content div_item">
               		<ul class='mui-table-view'>
               			
               		</ul>
           		</div>
       		</li>
    	</ul>-->

		<script src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src='../../plugins/template/template.js'></script>
		<script type="text/javascript" src="../../js/md5.js" ></script>
		<script src='../../plugins/fontset/fontset.js'></script>
		<!--<script type="text/javascript" src="../../js/judge.js" ></script>-->
		<script id='search-list' type='text/html'>
			<ul class='mui-table-view' class="search-list">
				{{each data as value i}}
				<li class='mui-table-view-cell' onclick="openNewWindow({{value.id}})">{{value.business_name}}</li>
				{{/each}}	
			</ul>
		</script>
		<script id="service_list" type="text/html">
			<!--服务信息列表-->
			<ul class="mui-table-view clear ul_item">
				{{each data as value i}}
	       		<li class="mui-table-view-cell mui-collapse">
	           		<a class="mui-navigate-right" href="#">
	           			<p>{{value.title}}</p>
	           		</a>
	           		<div class="mui-collapse-content div_item">
	               		<ul class='mui-table-view'>
	               			{{each value.info as value i}}
	               			<li class='mui-table-view-cell' onclick="openNewWindow({{value.id}})">
	               				<p class="second-p">{{value.business_name}}</p>
	               			</li>
	               			{{/each}}
	               		</ul>
	           		</div>
	       		</li>
	       		{{/each}}
    		</ul>
	    </script>
	    <script id="service_list_second" type="text/html">
	    	<ul class="mui-table-view clear ul_item">
	    		{{each data as value i}}
	    		<li class="mui-table-view-cell" onclick="openNewWindow({{value.id}})">
	           		<p class='item_title'>
	           			{{value.title}}
	           			<i></i>
	           		</p>
	       		</li>
	       		{{/each}}
	    	</ul>
	    </script>
		<script type="text/javascript">
			mui.init();
			
			mui.plusReady(function(){
				var ws = plus.webview.currentWebview(),
					id = ws.pageId,
					title = ws.pageTitle;
				$("header").find("h1").text(title);
				myAnotherAjax('administration/administration/guidelist','get',{'id':id},function(data){
					console.log(JSON.stringify(data))
					if(data.success){
						initData(data);
					}else{
						mui.alert("网络错误，请重新尝试");
					}
				});
				var nameProving = /[\u4E00-\u9FA5]*/;
				$(".input_click").keyup(function(){
					var content = $(this).val();
					if(nameProving.test(content) && content.length > 0){
						myAnotherAjax('administration/administration/search','post',{'condition':content,'id':id},function(data){
							console.log(JSON.stringify(data))
							if(data.success){
								if(data.data.length > 0){
									initList(data);	
								}else{
									var html = '<div class="search-none">'+
													'<p>没有查询到“'+content+
													'”的相关内容</p>'+
													'<p>请重新搜索</p>'+
												'</div>';	
									$(".modal_search").html(html);
								}
							}
							
						})
					} else if(content.length == 0){
						$(".modal_search").html('');
					}
				});
			});
			//初始化数据
			function initData(data){
				var list = {
					data:data.data
				}
				if(list.data[0].info.length >= 0){
					var html = template('service_list',list);
					$("#main").append(html);
				}else{
					var html = template('service_list_second',list);
					$("#main").append(html);
				}
			}
			//搜索列表
			function initList(data){
				var list = {
					data:data.data
				}
				var html = template('search-list',list);
				$(".modal_search").html(html);
			}
			//打开新页面
			function openNewWindow(id){
				console.log(id);
				mui.openWindow({
					url:'main_detail.html',
					extras:{
						pageId:id
					},
					waiting:{
				      		autoShow:true,//自动显示等待框，默认为true
				      		title:'正在加载...',//等待对话框上显示的提示内容
  					},
  					show:{
  						autoShow:true,
  						aniShow:'fade-in'
  					}
				})
			}
			//选中搜索框：弹出搜索
			$('.mui-search').on('touchstart',function(e){
				//强制调起输入法
				var Context = plus.android.importClass("android.content.Context");
	            var InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
	            var main = plus.android.runtimeMainActivity();
	            var imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
	            imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
	            
				$('.mui-search').addClass('mui-search-click');
				$('.s_click').show();
				$('.modal_search').show();
				$('.input_click').focus();
				$("#main").hide();
				e.preventDefault();
			});
			//点击取消，返回原列表
			$('.s_click').on('touchstart',function(e){
				$('.mui-search').removeClass('mui-search-click');
				$('.modal_search').hide();
				$('.s_click').hide();
				//并且输入内容为空
				$('.input_click').val('');
				$('.input_click').focus();
				$('.input_click').blur();
				e.preventDefault();
			});
			$('.input_click').on('input',function(){
				var content = $(this).val();
				if(content.length == 0){
					$(".modal_search").html('');
				}
			})
			$('.input_click').blur(function(e){
				var content = $(this).val();
				if(content.length == 0){
					$('.mui-search').removeClass('mui-search-click');
					$('.modal_search').hide();
					$('.s_click').hide();
					$("#main").show();
					$(".modal_search").html('');
					e.preventDefault();
				}
			})
			
		</script>
	</body>
</html>